<template>
  <div class="container">
    <div class="search-container">
      <span>{{ route.query.nickName }}</span>
      <span style="color:#999;">({{ route.query.startTime }}-{{route.query.endTime}})</span>
    </div>
    <div class="list-container">
      <van-pull-refresh v-model="refreshing" v-model:loading="loading" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <div class="record-item" v-for="(item,index) in list" :key="item">
            <div class="record-item-title">{{ item.rq }}</div>
            <div class="log-children">
              <div class="log-row" v-for="(it,i) in item.logsDetailList" :key="i">
                <div class="log-i">{{ i + 1 }}</div>
                <div class="log-t">{{ { 1: '上午', 2: '下午', 3: '晚上' }[it.rqType] }}:</div>
                <div class="log-c">{{ it.workContent }}</div>
              </div>
              <div v-if="!item.logsDetailList || item.logsDetailList.length===0">未填写</div>
            </div>
            <div class="log-summary">
              {{ item.summaryDayWork || '未填写' }}
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
// 查询某一个人从某天到某天的日志

import { onMounted, ref } from 'vue'
import { getAllByTime } from '@/api/workLog.js'
import { useRoute } from 'vue-router'


const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const route = useRoute()

const getList = () => {

  let params = route.query
  getAllByTime(params).then(res => {
    refreshing.value = false
    list.value = res.data
    loading.value = false
    finished.value = true
  })
}

const onRefresh = () => {
  list.value = []
  // 清空列表数据
  finished.value = false
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  refreshing.value = false
  getList()
}
const init = () => {
  // getList()
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100%;

  .search-container {
    width: 100%;
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .start-time, .end-time {
      width: 30%;
      text-align: center;
    }
  }

  .list-container {
    margin-top: 10px;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}

.record-item {
  width: calc(100% - 20px);
  background-color: #fff;
  margin: 0 10px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .record-item-title {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #f2f2f2;
    font-weight: bold;
  }

  .log-children {
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;

    .log-row {
      margin-bottom: 5px;
      display: flex;
      line-height: 20px;

      .log-i {
        width: 20px;
        height: 20px;
        background-color: #f2f2f2;
        text-align: center;
      }

      .log-t {
        width: 40px;
        text-align: center;
      }

      .log-c {
        width: calc(100% - 70px);
      }
    }
  }

  .log-summary {
    padding: 10px;
  }
}

.date-picker-box {
  height: 500px;
}
</style>
